<route lang="json5">
	{
	needLogin: true,
	style: {
	navigationStyle: 'default',
	navigationBarTitleText: '学校公告',
	},
	}
</route>
<script lang="ts" setup>
	import { noticeListApi } from '@/service/my/index'
	/* 引入 暂无数据 - 图片 */
	import emptyImage from '@/static/images/icons/empty.png'
	const pageNum = ref(1)
	const pageSize = ref(20)

	const loading = ref(false)
	const finished = ref(false)

	// 修改状态管理
	const state = ref<'loading' | 'finished' | 'error'>('loading')

	// 课程列表信息
	const noticeList = ref<any[]>([])

	// 请求历史学习记录
	async function getDataRequest(isLoadMore = false) {
		if (loading.value || (finished.value && isLoadMore)) return
		loading.value = true
		const params = { pageNum: pageNum.value, pageSize: pageSize.value }
		const data : any = await noticeListApi(params)
		if (data?.code === 200) {
			const { rows = [], total = 0 } = data || {}

			if (isLoadMore) {
				noticeList.value = [...noticeList.value, ...rows]
			} else {
				noticeList.value = rows
			}

			// 判断是否加载完所有数据
			finished.value = noticeList.value.length >= total
			state.value = finished.value ? 'finished' : 'loading'
		} else {
			console.error('获取课程列表失败:', data.msg)
			state.value = 'error'
		}
		loading.value = false
	}

	// 页面启动
	onLoad(async () => {
		getDataRequest(false)
	})

	// 加载更多数据
	const loadMore = async () => {
		if (!loading.value && !finished.value) {
			pageNum.value++
			await getDataRequest(true)
		}
	}

	// 监听页面滚动到底部
	onReachBottom(() => {
		if (!loading.value && !finished.value) {
			loadMore()
		}
	})

	// 跳转课程详情
	const goNoticeDetails = (notice : any) => {
		uni.navigateTo({
			url: `/pages/my/message/noticeDetails?id=${notice.id}&isRead=${notice.ifRead === '1' ? "1" : "0"}`,
		})
	}

	onShow(() => {
		console.log('onShow')
		// 获取传值
		uni.$on('refreshIfNeeded', function (dat) {
			console.log('监听到事件来自 refreshIfNeeded ，携带参数为：' + dat)
			if (dat.value) {
				getDataRequest(false)
			}
			uni.$off('refreshIfNeeded')
		})
	})
</script>
<template>
	<view class="main_container">
		<!-- 骨架屏 -->
		<template v-if="loading && pageNum === 1">
			<wd-skeleton :row="3" animated />
		</template>
		<template v-else>
			<uni-list>
				<uni-list-item v-for="(record, index) in noticeList" :key="index">
					<view class="list_item_container" @click="goNoticeDetails(record)">
						<wd-badge is-dot top="3" :hidden="record.ifRead === '1'">
							<wd-icon name="/static/images/my/notice_icon.png" size="40" />
						</wd-badge>
						<view class="notice_info">
							<!-- 标题 -->
							<view style="display: flex; justify-content: space-between; align-items: center;">
								<text class="notice_title">{{ record.title }}</text>
								<text class="notice_time">{{ record.publishTime }}</text>
							</view>
							<!-- 副标题 -->
							<text
								class="notice_sub_title">{{ record.content.includes("<p>") ? record.title:record.content }}</text>
						</view>
					</view>
				</uni-list-item>
			</uni-list>
		</template>

		<view v-if="noticeList.length <= 0" class="empty-state flex-center flex-col mt-200rpx">
			<wd-status-tip :image="emptyImage" tip="暂无公告消息" />
		</view>
		<!-- 添加加载状态和加载完成的提示 -->
		<wd-loadmore v-if="noticeList.length > 0" :state="state" @reload="loadMore"
			finished-text="已经全部加载完毕"></wd-loadmore>
	</view>
</template>
<style scoped>
	.main_container {
		display: flex;
		flex-direction: column;
		background: #f5f5f5;
	}

	.list_item_container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 25rpx;
		margin: 15rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	.notice_info {
		display: flex;
		flex-direction: column;
		width: 90%;
		margin-left: 20rpx;
	}

	.notice_title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.notice_sub_title {
		margin-top: 15rpx;
		font-size: medium;
		font-size: 24rpx;
		color: #bdc0c6;
		margin-bottom: 5rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.notice_time {
		font-size: 20rpx;
		color: #bdc0c6;
	}
</style>